<template>
  <div class="card-wrap">
    <a-popover position="bottom">
      <a-card :bordered="false" hoverable>
        <a-space align="start">
          <div class="card-content-icon">
            <icon-user :size="48" />
          </div>
          <a-card-meta>
            <template #title>
              <a-typography-text style="margin-right: 10px">
                {{ data.flowName }}
                <a-tag v-if="data.processStatus" color="green">已发布</a-tag>
                <a-tag v-else>未发布</a-tag>
              </a-typography-text>
            </template>
            <template #description> {{ data.illustrate }} </template>
          </a-card-meta>
        </a-space>
      </a-card>
      <template #content>
        <slot name="btn"> </slot>
      </template>
    </a-popover>
  </div>
</template>
<script setup lang="ts">
import { FlowGroup } from '@/apis/flowGroup/type';

const props = withDefaults(
  defineProps<{
    data: FlowGroup;
  }>(),
  {}
);
</script>
<style lang="less" scoped>
.card-wrap {
  height: 100%;
  transition: all 0.3s;
  // border: 1px solid var(--color-neutral-3);
  border-radius: 4px;
  &:hover {
    transform: translateY(-4px);
    // box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
  }
  .card-content-icon {
    background: linear-gradient(
      270deg,
      rgba(78, 139, 251, 1) 0%,
      rgba(78, 139, 251, 1) 0%,
      rgba(114, 162, 254, 1) 100%,
      rgba(114, 162, 254, 1) 100%
    );
    border: none;
    border-radius: 15px;
    color: white;
    padding: 8px;
  }
}
:deep(.arco-card) {
  height: 100%;
  // .arco-card-body {
  //   height: 100%;
  // }
}
</style>
